import React, { Component, useRef } from 'react'
import { SearchOutlined } from "@ant-design/icons";
import { Input, Space, Form, Button } from 'antd'
import _ from 'lodash'
import { phoneReg } from '@/utils/regexp'
import { apiShoppingBeauticianInfoPage, apiShoppingBeauticianInfoDel, apiShoppingBeauticianInfoEdit, apiShoppingBeauticianInfoAdd } from '@/request/beautician'
import TheButton from '@/components/TheButton'
import ThePagination from '@/components/ThePagination'
import TheTable from '@/components/TheTable'
import TheDialog from '@/components/TheDialog'

const SearchHeader = ({ getValue, openAdd }) => {
  const formRef = useRef()
  const onFinish = (values) => {
    _.forIn(values, (v, k) => {
      if (!v) {
        delete (values[k])
      }
    })
    getValue(values)
  }
  const reset = () => {
    formRef.current.setFieldsValue({
      shoppingBeauticianName: ''
    })
    getValue({})
  }
  return <div style={{ display: 'flex', justifyContent: 'space-between' }}>
    <Form layout={'inline'} onFinish={onFinish} ref={formRef}>
      <Form.Item name='shoppingBeauticianName'>
        <Input suffix={<SearchOutlined />} placeholder="美容师姓名" />
      </Form.Item>
      <Form.Item>
        <Space>
          <Button type='primary' htmlType='submit'>搜索</Button>
          <Button onClick={reset}>重置</Button>
        </Space>
      </Form.Item>
    </Form>
    <TheButton  hasPermi={['cashier:beautician:add']}  onClick={openAdd} size="middle" type='default'>新增美容师</TheButton>
  </div>
}

export default class Beautician extends Component {
  state = {
    pageData: {
      pageNo: 1,
      pageSize: 10
    },
    total: 0,
    searchValue: {},
    columns: [
      {
        title: '美容师姓名',
        dataIndex: 'shoppingBeauticianName',
        key: 'shoppingBeauticianName'
      },
      {
        title: '联系电话',
        dataIndex: 'shoppingBeauticianMobile',
        key: 'shoppingBeauticianMobile'
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime'
      },
      {
        title: '操作',
        render: (text, record) => {
          return <>
            <TheButton  hasPermi={['cashier:beautician:edit']} onClick={() => this.updateSalesman(record)}>编辑</TheButton>
            <TheButton  hasPermi={['cashier:beautician:delete']} onClick={() => this.delConfirm(record)}>删除</TheButton>
          </>
        }
      }
    ],
    dataSource: [],
    loading: false,
    shoppingBeauticianId: '',
    editValue: {},
  }

  componentDidMount() {
    this.getData()
  }

  getData = async () => {
    this.setState({ loading: true })
    const { pageData, searchValue } = this.state
    let res = await apiShoppingBeauticianInfoPage({ ...pageData, ...searchValue })
    if (res.data && res.code === 0) {
      this.setState({
        dataSource: res.data,
        pageData: {
          pageNo: res.pageNo,
          pageSize: res.pageSize
        },
        total: res.totalCount
      })
    }
    this.setState({ loading: false })
  }

  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo, pageSize
      }
    }, () => {
      this.getData()
    })
  };

  getValue = value => {
    this.setState({
      searchValue: value,
      pageData: {
        pageNo: 1,
        pageSize: 10
      }
    }, () => this.getData())
  }

  openAdd = () => {
    this.setState({
      visible: true,
      title: '新增美容师',
      shoppingBeauticianId: ''
    })
  }

  updateSalesman = (value) => {
    const { shoppingBeauticianId, shoppingBeauticianMobile, shoppingBeauticianName } = value
    this.setState({
      visible: true,
      title: '修改美容师',
      shoppingBeauticianId,
      editValue: {
        shoppingBeauticianMobile,
        shoppingBeauticianName
      }
    })
  }

  handleCancel = () => {
    this.setState({
      visible: false,
      title: '',
      shoppingBeauticianId: '',
      editValue: {}
    })
  }

  delConfirm = (value) => {
    const { shoppingBeauticianId } = value
    React.$confirm({
      title: '您确认删除此美容师信息吗？',
      onOk: async () => {
        let res = await apiShoppingBeauticianInfoDel({ shoppingBeauticianId })
        if (res.code === 0) {
          React.$message({
            type: 'info',
            content: '删除成功'
          })
          this.getData()
        }
      }
    })
  }

  editSalesman = async (value) => {
    const { shoppingBeauticianId } = this.state
    this.setState({ btnLoading: true })
    if (shoppingBeauticianId) {
      let res = await apiShoppingBeauticianInfoEdit({ ...value, shoppingBeauticianId })
      if (res.code === 0) {
        React.$message({
          type: 'info',
          content: '修改成功'
        })
      }
    } else {
      let res = await apiShoppingBeauticianInfoAdd({ ...value })
      if (res.code === 0) {
        React.$message({
          type: 'info',
          content: '新增成功'
        })
      }
    }
    this.setState({ btnLoading: false })
    this.handleCancel()
    this.getData()
  }






  render() {
    const { columns, dataSource, loading, pageData: { pageNo, pageSize }, total, visible, title, btnLoading, editValue, monthVisible, monthColumns, monthData, dayVisible, dayData, dayColumns, monthLoading, dayLoading } = this.state
    return (
      <div className='p-layout-box'>
        <SearchHeader getValue={this.getValue} openAdd={this.openAdd} />
        <div className="p-layout-content-pagination">
          <TheTable columns={columns} dataSource={dataSource} loading={loading} scroll={{ x: "max-content", y: '63vh' }} />
          <ThePagination pageNo={pageNo} pageSize={pageSize} total={total} pageChange={this.pageChange} />
        </div>
        <TheDialog
          width={400}
          visible={visible}
          title={title}
          footer={null}
          handleCancel={this.handleCancel}
        >
          <Form initialValues={editValue} onFinish={this.editSalesman} labelCol={{ span: 9 }} labelAlign="left">
            <Form.Item label="美容师姓名" name='shoppingBeauticianName' rules={[{ required: true }]}>
              <Input />
            </Form.Item>
            <Form.Item label="美容师联系方式" name='shoppingBeauticianMobile' rules={[{ required: true }, { pattern: phoneReg, message: '请输入正确手机号码' }]}>
              <Input />
            </Form.Item>
            <Form.Item>
              <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: -30 }}>
                <Space align="end">
                  <Button onClick={this.handleCancel}>取消</Button>
                  <Button type='primary' htmlType='submit' loading={btnLoading}>确认</Button>
                </Space>
              </div>
            </Form.Item>
          </Form>
        </TheDialog>
      </div >
    )
  }
}
